<!--
 * @Author: Dorange.Wang
 * @Date: 2021-05-20 09:49:15
 * @LastEditors: your name
 * @LastEditTime: 2021-05-28 10:19:02
 * @Description: file content
-->
<template>
  <div>
    <!-- <el-button type="text" @click="handleParamsAdd">添加参数</el-button> -->

    <el-form :model="formData" ref="formData" label-width="120px">
      <el-table
        class="mt10"
        ref="table"
        :data="formData.params"
        style="width: 100%"
        row-key="id"
        stripe
        border
      >
        <el-table-column prop="name" label="字段名" width="150" />
        <el-table-column prop="value" label="取值表达式">
          <template slot="header">
            取值表达式
            <el-tooltip
              popper-class="custom-popper"
              content="请使用JsonPath表达式"
              placement="top"
            >
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-form-item
              label-width="0px"
              :prop="'params.' + scope.$index + '.value'"
              :rules="[
                {
                  required: true,
                  message: '取值表达式不能为空',
                  trigger: 'change',
                },
              ]"
            >
              <el-input
                v-model="scope.row.value"
                :placeholder="fieldPlaceholderMap[scope.row.name]"
                :maxlength="200"
                show-word-limit
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
const defaultParams = [
  {
    name: "code",
    value: "",
  },
  {
    name: "data",
    value: "",
  },
  {
    name: "message",
    value: "",
  },
];

const fieldPlaceholderMap = {
  code: "请输入取值表达式，例：$.error == 200 ? 0 : $.error",
  data: "请输入取值表达式，例：$.data",
  message: "请输入取值表达式，例：$.message",
};

export default {
  name: "HttpResTable",
  data() {
    return {
      formData: {
        params: defaultParams,
      },
      fieldPlaceholderMap,
    };
  },
  methods: {
    setData(data) {
      this.formData.params = data ? JSON.parse(data) : defaultParams;
    },

    async getData() {
      try {
        await this.$refs.formData.validate();
        const { params } = this.formData;
        return params.length > 0 ? JSON.stringify(params) : "";
      } catch (error) {
        console.log(error);
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table ::v-deep .el-form-item {
  margin-bottom: 0;
}
</style>
